<template>
  <!-- 储值界面 -->
  <div class="padding_10">
    <!-- 筛选 -->
    <div>
      <!-- 筛选条件输入框 -->
      <div>
        <div class="grid_4_column">
          <div
            v-for="(item, index) of filterInpTop"
            :key="index"
            class="flex_y_center"
          >
            <div style="width: 80px; text-align: right">{{ item.name }}</div>
            <el-input
              v-model="filterForm[item.value]"
              :placeholder="item.place"
            />
          </div>
        </div>
      </div>
      <!-- 筛选，重置筛选条件按钮 -->
      <div style="margin-top: 10px">
        <el-button
          icon="el-icon-search"
          :loading="filterLoad"
          type="primary"
          @click="getCustomer('filterLoad')"
        >
          筛选
        </el-button>
        <el-button type="text" @click="resetCondition">重置筛选条件</el-button>
      </div>
    </div>
    <!-- 储值卡展示表格 -->
    <div>
      <el-table
        :data="tableData"
        :empty-text="emptyText"
        :span-method="objectSpanMethod"
        style="width: 100%; margin-top: 10px"
      >
        <el-table-column align="center" label="用户名" prop="cus_name" />
        <el-table-column label="卡名称" prop="prepaid_name" />
        <el-table-column label="余额" prop="card_balance" />
        <el-table-column label="本金" prop="card_amount" />
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button
              v-permissions="{ permission: ['adjust:Prepaid'] }"
              type="text"
              @click="openDialog(scope.$index, scope.row, '调账')"
            >
              调账
            </el-button>
            <el-button
              v-permissions="{ permission: ['recharge:Prepaid'] }"
              type="text"
              @click="openDialog(scope.$index, scope.row, '充值')"
            >
              充值
            </el-button>
          </template>
        </el-table-column>
        <el-table-column align="center" label="开通">
          <template slot-scope="scope">
            <el-button
              v-permissions="{ permission: ['bind:Prepaid'] }"
              type="text"
              @click="openDialog(scope.$index, scope.row, '绑定')"
            >
              绑定卡
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div style="display: flex; justify-content: space-between">
        <div></div>
        <el-pagination
          :current-page.sync="page"
          layout="prev, pager, next, jumper"
          :total="total"
        />
      </div>
    </div>
    <!-- 开通，调账，充值对话框 -->
    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogManyVisible"
      width="30%"
    >
      <div>
        <!-- 客户名 -->
        <div class="flex_y_center margin_bottom_15" style="padding: 5px 0">
          <div class="inp_title">客户：</div>
          <div>{{ customer }}</div>
        </div>
        <!-- 当前储值卡 -->
        <div
          v-if="dialogTitle != '绑定'"
          class="flex_y_center margin_bottom_15"
          style="padding: 5px 0"
        >
          <div class="inp_title">储值卡名称：</div>
          <div>{{ cardName }}</div>
        </div>
        <!-- 开通 -->
        <open-card
          v-if="dialogTitle == '绑定'"
          :o-clear-bool="clearBool"
          :o-customer-id="customerId"
          @send="refreshList"
        />
        <!-- 充值 -->
        <recharge-card
          v-else-if="dialogTitle == '充值'"
          :o-card-info="cardInfo"
          :o-clear-bool="clearBool"
          @send="refreshList"
        />
        <!-- 调账 -->
        <reconciliation
          v-else-if="dialogTitle == '调账'"
          :o-clear-bool="clearBool"
          :o-prepaid-id="prepaidId"
          @send="refreshList"
        />
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import { getCusPrepaidList } from '@/api/storedValue'

  export default {
    components: {
      openCard: () => import('./components/opencard.vue'),
      rechargeCard: () => import('./components/rechargecard.vue'),
      reconciliation: () => import('./components/reconciliation.vue'),
    },
    data() {
      return {
        filterInpTop: [
          { name: '用户名：', place: '请输入用户名', value: 'cus_name' },
          { name: '手机号：', place: '请输入手机号', value: 'tel' },
        ],
        filterLoad: false, // 控制筛选按钮的加载样式的显示和隐藏
        // 作为筛选条件参数
        filterForm: {
          cus_name: '', // 商品名
          tel: '', // 手机号
        },

        emptyText: ' ',
        tableData: [], // 存放获取到的客户列表数据
        page: 1, // 指定获取第几页的客户数据列表
        total: 10, // 分页页数

        customerId: '', // 当前选择客户的id
        prepaidId: '', // 当前选择卡的id
        cardName: '', // 当前选择卡名称
        cardInfo: {}, // 当前选择卡的信息
        dialogManyVisible: false, // 控制开通，调账，充值对话框显示隐藏
        dialogTitle: '', // 对话框标题
        clearBool: false, // 告诉子组件清空form数据
      }
    },
    computed: {
      customer() {
        return this.cardInfo.cus_name + '-' + this.cardInfo.tel
      },
    },
    watch: {
      page() {
        this.getCustomer()
      },
      // 监听对话框的显示和隐藏，如果对话框关闭了那么将 sendData 对象中的属性值清空
      dialogManyVisible(newValue) {
        this.clearBool = !this.clearBool
        if (!newValue) {
          this.prepaidId = 0
        }
      },
    },
    mounted() {
      this.getCustomer()
    },
    methods: {
      // 合并单元格
      objectSpanMethod({ row, columnIndex }) {
        if (columnIndex === 0) {
          if (row.merge) {
            return {
              rowspan: row.merge,
              colspan: 1,
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            }
          }
        }
        if (columnIndex === 5) {
          if (row.merge) {
            return {
              rowspan: row.merge,
              colspan: 1,
            }
          } else {
            return {
              rowspan: 0,
              colspan: 0,
            }
          }
        }
      },
      // 获取客户列表
      getCustomer(btnLoad) {
        this[btnLoad] = true
        const loading = this.$loading({
          lock: true,
          target:
            this.tableData.length == 0
              ? '.el-table__empty-block'
              : '.el-table__body',
        })
        let a = ''
        const params = {
          page: this.page,
          ...this.filterForm,
          pagesize: 10,
        }
        getCusPrepaidList(params).then((res) => {
          for (let item of res.data.data) {
            for (let itemChild of item.prepaid_info) {
              if (item.id != a) {
                this.tableData.push({
                  customer_id: item.id,
                  cus_name: item.cus_name,
                  tel: item.tel,
                  ...itemChild,
                  merge: item.prepaid_info.length,
                })
              } else {
                this.tableData.push({
                  customer_id: item.id,
                  cus_name: item.cus_name,
                  tel: item.tel,
                  ...itemChild,
                })
              }
              a = item.id
            }
          }
          this[btnLoad] = false
          loading.close()
          if (this.tableData.length == 0) this.emptyText = '暂无数据'
          else this.total = res.data.last_page * res.data.per_page
        })
      },
      // 重置筛选条件
      resetCondition() {
        for (let item in this.filterForm) {
          this.filterForm[item] = ''
        }
        this.tableLoad = true
        this.getCustomer()
      },
      // 打开调账，充值对话框
      openDialog(a, currentItem, name) {
        this.dialogTitle = name
        this.cardInfo = currentItem
        switch (name) {
          case '绑定':
            this.customerId = currentItem.customer_id
            break
          case '充值':
            this.cardName = currentItem.prepaid_name
            break
          case '调账':
            this.prepaidId = currentItem.id
            this.cardName = currentItem.prepaid_name
            break
        }
        this.dialogManyVisible = true
      },
      // 重新获取列表，关闭对话框
      refreshList() {
        this.getCustomer()
        // 关闭对话框
        this.dialogManyVisible = false
      },
    },
  }
</script>

<style scoped>
  .grid_4_column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 10px;
  }
  .right {
    float: right;
  }
  .inp_title {
    width: 30%;
    text-align: right;
  }
  .margin_bottom_15 {
    margin-bottom: 15px;
  }
</style>
